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Grundstruktur 


<!DOCTYPE html> 
<html> 
<head> 
<title>Hochschule Furtwangen</title> 
</head> 
<body> 
Text, der auf der Webseite erscheint. 
</body> 
</html> 


= Dokumententyp, verwendete HTML Version 
«= Wurzelelement: <html> 
= Kopfelement: <head> 


= Inhaltselement: <body> 
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Vorstellung der wichtigsten Elemente 


HTML Einführung 


Titel 


= Jedes HTML-Dokument muss einen Titel enthalten 
= Elementname "title" 


= Kopfelement > wird nicht im Inhalt dargestellt 
>» Titelzeile des Browserfensters 
> Beschriftung des Tabs 
> Lesezeichen 


>» Suchmaschinen 


Elemente zur Auszeichnung von Text 


Text 


Überschrift 


« Auszeichnungselement für Überschriften 


= Elementname "h..." von "header" 


= sechs mögliche Verschachtelungsebenen (h1 bis h6), z.B.: 


> Kapitel 
>» Abschnitt 
> Unterabschnitt 


<h1>Überschrift</h1> 


Überschrift 


Überschrift 


Text ohne weitere Auszeichnungen 


Text ohne weitere Auszeichnungen 


Überschrift 1 


<hi1>Überschrift 
<h2>Überschrift 
<h3>Überschrift 
<h4>Überschrift 
<h5>Überschrift 
<h6>Überschrift 


1</h1> 
2</h2> 
3</h3> 
4</h4> 
5</h5> 
6</h6> 


Überschrift 2 
Überschrift 3 


Überschrift 4 


Überschrift 5 


Überschrift 6 


Textabsätze 


= Browser ignorieren Formatierungen im Quelltext 


> Leerzeichen, Tabs, neue Zeile werden zu einem einzelnen 
Leerzeichen zusammengefasst 


= Absätze müssen mit einem Element ausgezeichnet werden 


= Elementname "p" von "paragraph" 
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Textabsätze 


Formatierung im Quelltext 


funktioniert so nicht 


<p>Formatierung im Quelltext</p> 


<p>funktioniert so besser</p> 


Formatierung im Quelltext funktioniert so nicht 


Formatierung im Quelltext 


funktioniert so besser 


Zeilenumbruch 


= Browser brechen Absätze automatisch um 


= HTML-Author kann Zeilen manuell umbrechen 


>» Elementname "br" von "line break" 


= Alternativ: sichtbare Trennlinie über gesamte Textbreite 


>» Elementname "hr" von "horizontal rule" 


= Leere Elemente 


Zeilenumbruch 


langer Text <br/> Mit manuellem 
Umbruch 


Textblock der durch eine <hr/> 
Trennlinie unterbrochen wird. 


langer Text 
Mit manuellem Umbruch 


Textblock der durch eine 


Trennlinie unterbrochen wird. 


OH 


Aufzählungen 


= Aufzählungen können als Liste ausgezeichnet werden 
>» Elementname "ul" von "unordered list" > Symbole 


>» Elementname "ol" von "ordered list" > Ziffern 


= Innerhalb der Liste Einträge als Unterelemente 


> Elementname "11" von "list item" 


= Verschachtelungen sind möglich 


Aufzählungen 


<ul> 
<li>erster Eintrag</li> 
<li>zweiter Eintrag</li> 
</ul> 


<ol> 
<li>erster Eintrag</li> 
<li>zweiter Eintrag</li> 
</ol> 


« erster Eintrag 
* zweiter Eintrag 


1. erster Eintrag 
2. zweiter Eintrag 
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Logische Auszeichnungen 


= Elemente um Text eine "Bedeutung" zu geben 


= Elementname "em" von "emphasis" 
> Betonung des Inhalts > kursive Darstellung 


= Elementname "strong" von "strong emphasis" 
> starke Betonung des Inhalts > fette Darstellung 


= Elementname "code" 
> Inhalt ist Programmcode > Schreibmaschinenschrift 


= Verschachtelungen sind möglich 


Logische Auszeichnungen 


Dieser Satz enthält <em>betonte</em> 
und <strong>stark betonte</strong> 
Wörter, sowie einen Codeschnipsel 
<code>6G0TO 10</code>. 


Dieser Satz enthält betonte und stark betonte 
Wörter, sowie einen Codeschnipsel coro ı0. 
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Beispiel Textelemente 


<h1>Spaghetti Aglio et Olio</hl> 


<h2>Zutaten</h2> 

<ul> 
<li>&frac12; kg Spaghetti</li> 
<1l1>3 Zehen Knoblauch</Lli> 
<1lLi>50 ml Olivenöl</Li> 

</ul> 


<hr/> 


<h2>Zubereitung</h2> 

<p> 

Knoblauch in Scheiben schneiden. 
Spaghetti <em>10 Minuten</em> kochen. 
Knoblauch mit Öl anbraten und Spaghetti 
unterrühren. 


</p> 


Spaghetti Aglio et Olio 


Zutaten 


+ Ya kg Spaghetti 
« 3 Zehen Knoblauch 
«e 50 mi Olivenöl 


Zubereitung 


Knoblauch in Scheiben schneiden. Spaghetti 10 
Minuten kochen. Knoblauch mit Ol anbraten und 
Spaghetti unterrühren. 


Elemente zur Auszeichnung von Verweisen 


Hypertext 


Verweise 


« Erlauben die Verknüpfung von einem HTML-Dokument auf ein anderes 
Dokument 


« Sind unidirektional (kein zurück) 


= Bestehen aus: 
> Verweistext 


> Verweisziel 
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Verweise 


= Elementname "a" von "anchor" 
= Inhalt des Elements ist der Verweistext 


= Attribut "href" von "hypertext reference" ist die URL des Verweisziels 
> relativ 
> absolut 
>» extern 


> email 
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Verweise 


http: //www.hs-furtwangen.de/web/kurs/dieses.html 


Link zum <a href="jenes.html">anderen nk zum: anderen fokumant: < 
Dokument</a>. un | = 


http: //www.hs-furtwangen.de/web/kurs/jenes.html 


Link zum <a href="dieses.html">anderen Link zum anderen Dokument. ; 
Dokument</a>. — — = 


http: //www.hs-furtwangen.de/web/kurs/dieses.html 


Link zum <a href="../jenes.html">anderen 
Dokument</a>. 


> http: //www.hs-furtwangen.de/web/jenes.html 
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Elemente ohne vordefinierte Semantik 


Universalelemente 
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Allgemeine Auszeichnungen 


= Allgemeine Auszeichnungen 
>» umschließen Text 


>» (noch) keine Semantik, nützlich für CSS und JavaScript 


= Allgemeines Block-Element 


>» Elementname "div" von "division" 


= Allgemeines Inline-Element 


>» Elementname "span" 
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Block / Inline 


= Alle Elemente von HTML gehören zu einer Kategorie 


>» Block > Erzeugteinen rechteckigen Bereich 
100 % Breite 


>» Inline >  Erzeugteinen Bereich, der dem Textfluss folgt. 


= Verschachtelungen sind möglich 


= Aber: Inline-Elemente dürfen keine Block-Elemente enthalten 
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Block / Inline 


Dieser Satz zeigt, <div>wie 
unterschiedlich sich Block- und Inline- 
Elemente</div> verhalten. 


Dieser Satz zeigt, <span>wie 
unterschiedlich sich Block- und Inline- 
Elemente</span> verhalten. 


Kombinationen 
<div> 
von Block- und Inline-Elementen 
<span>sind in HTML-Dokumenten</span> 
</div> 
möglich. 


Dieser Satz zeigt, 

wie unterschiedlich sich Block- und Inline- 
Elemente 

verhalten. 


Dieser Satz zeigt, wie unterschiedlich sich 
Block- und Inline-Elemente verhalten. 


Kombinationen 

von Block- und Inline-Elementen sind in HTML- 
Dokumenten 

möglich. 


allgemeine Attribute für alle Elemente 


Universalattribute 


Universalattribute 


« Attribut "id" 
> individueller Name des Elements 
> muss in der HTML-Seite eindeutig sein 
« Attribut "title" 
> kurze individuelle Beschreibung des Elements 
> wird als Tooltip angezeigt 
« Attribut "style" und "class" 


>» CSS spezifische Attribute, Erklärung später 
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Universalattribute 


<h1 id="erste" title="Dieser Text wird 
angezeigt, wenn der Mauszeiger über 
dem Element steht'!"> 

Überschrift 
</h1> 


Überschrift 


‚Dieser Text wird angezeigt, wenn der 


‚Mauszeiger über dem Element steht 


Elemente zur Auszeichnung von Tabellen (Selbststudium) 


Tabellen 


so 


Definition von Tabellen 


= Zweck: 
>» Darstellung tabellarischer Daten 
> Layoutdefinition (mehrspaltiger Text, Menüstruktur, ...) 


> Besser mittels CSS 


= Mit oder ohne Gitternetz 


Standards des WWW 


Nam 0 Bedeutung 


Anwendungsprotokoll für die 
TTP |IKommunikation zwischen Client und 
Server 


RL Identifizierung von entfernten 
Ressourcen 
Beschreibungssprache um verteilte 
TML 
Dokumente zu erstellen 
3 
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Tabellen 


= Elementname "table" 
> Definition einer Tabelle > kein Text, nur Unterelemente 


= Elementname "tr" von "table row" 
> Definition einer Tabellenzeile > nur Unterelemente 


= Elementname "td" von "table data" 
> Definition einer Tabellenzelle > Text 


= Elementname "th" von "table header" 
> Titelzelle > Spezialform von "td" > zentriert und fett 
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Tabellen 


<table> 
<tr> 
<th>1</th> 
<th>2</th> 
</tr> 
<tr> 
<td>3</td> 
<td>A</td> 
</tr> 
tr? 
<td>5</td> 
<td>6</td> 
</tr> 
</table> 


3 


Element table 


« Attribute: 
> width 
Tabellenbreite x 
>» border _—” 
Rahmenbreite y 


>» cellspacing 
Abstand zwischen Zellen 


>» cellpadding 
Abstand Zelle zu Inhalt 


Element table 


<table border="5" 
cellspacing="12" 
cellpadding="1"> 
<tr> 


<th>1</th> 
<th>2</th> ı2 
</tr> la! 
<tr> 
<td>3</td> ee 
<td>4</td> 
</tr> 
</table> 


<table border='"5" 
cellspacing="1" 
cellpadding="9"> 
<tr> 


<th>1</th> ıl2 
<th>2</th> 
</tr> 1314| 
<tr> 
<td>3</td> 
<td>4A</td> 
</tr> 
</table> 35 
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Element tr 


= Attribute: 


» align = left | center | right 
Richtet Zellen einer Zeile horizontal aus 


>» valign = top | middle | bottom 
Richtet Zellen einer Zeile vertikal aus 
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Element tr 


<table border="1" 
width="200"> 
<tr align="right"> 
<th>1</th> 
<th>2</th> 
</tr> 
<tr align="center"> 
<td>3</td> 
<td>4A4</td> 
</tr> 
</table> 
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Element td 


= Attribute: 


>» align = left | center | right 
Richtet Zelle horizontal aus 


>» valign = top | middle | bottom 
Richtet Zelle vertikal aus 


> width 
Breite der Zelle (und damit der Spalte) in Pixel 


> colspan 
Anzahl der Spalten, über die sich die Zelle erstreckt 


> rowspan 
Anzahl der Zeilen, über die sich die Zelle erstreckt 
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Element td 


<table border="1" width="200"> 
<tr> 
<th align="right">1</th> 
<th align="left">2</th> 
</tr> 
<tr> 
<td colspan='"2'" align="center">3</td> 
</tr> 
</table> 


<table border="1" width="200"> 


<tr> 
<th colspan="2" rowspan="2'">1</th> 
<th>2</th> 

</tr> 


<tr> 
0. a 5 | | 


<tr> 
<td>4</td> 
<td>5</td> 
<td>6</td> 
</tr> 
</table> 
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Beispiel Tabellenelemente 


<table border="1!"> 


<tr> 


<th colspan="2">Standards des WWW</th> 


</tr> 
Str> 
<th>Name</th> 
<th>Bedeutung</th> 
</tr> 
<tr> 
<td>HTTP</td> 
<td>Anwendungsprotokoll...</td> 
</tr> 
<tr> 
<td>URL</td> 
<td>Identifizierung...</td> 
</tr> 
<> 
<td>HTML</td> 


<td>Beschreibungssprache...</td> 


</tr> 


</table> 
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Standards des WWW 


Nam 0 Bedeutung 


Anwendungsprotokoll für die 


TTP Kommunikation zwischen Client und 
Server 


RL Identifizierung von entfernten 
Ressourcen 
Beschreibungssprache um verteilte 
TML 
Dokumente zu erstellen 


Gans 
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Tabellen als Layoutmedium 


<table border="0" cellpadding="0" 
cellspacing="20" width="400"> 
<tr> 


<td colspan='"2"> 
<h1>Überschrift</h1></td> 
</td> 
</tr> 
<tr> 
<td valign="top"> 
<h4>Navigation</h4> 
<p>Suche<br> 
Blog<br> 
Wiki<br> 
Mail</p> 
<h4>Aktuell</h4> 
<p>...</p> 
</td> 
<td valign="top"> 
<h3>HTML Dokumente</h3> 
<p>Sind...</p> 
</td> 
</tr> 
</table> 


Überschrift 


Navigation HTML Dokumente 


Suche Sind reine Textdateien, die 

Blog einer HTML-Konvention 

Wiki enstprechen. Sie bestehen 

Mail aus darzustellenden Text und 
Strukturinformationen 

Aktuell (Markup). 
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Elemente zur Auszeichnung von Bildern (Selbststudium) 


Grafiken 
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Grafikelement 


= Elementname "img" von "image" 
« Attribut "src" von "source" definiert Bild-URL 


= Attribut "alt" von "alternative" definiert Alternativtext 
>» Falls Bild nicht geladen werden kann 
>» Für barrierefreie Webseiten 

= HTML definiert keine Grafikformate 
>» unterstützt werden meist GIF, PNG, JPG 
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Grafikelement 


<p>Monument Valley</p> 
<img src="monument.jpg" 
alt="Bild vom Monument Valley"/> 
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Monument Valley 
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Grafikelement Attribute 


« Größe mittels "width" und "height" 


>» sollten immer angegeben werden 
= Rahmen mittels "border" 


= Ausrichten mittels "align" 
> "top", "middle" und "bottom" 
> "risht" und "left" 
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Grafikelement 


<p>Monument Valley</p> 
<img src="monument.jpg" 
alt="Bild vom Monument Valley" 
width="300" 
height='"50" 
border="10'/> 


Monument Valley 


<p> 

<img src="monument. jpg" 
width='"100" 
alt="Bild vom Monument Valley" 
align="bottom"/> 

Monument Valley 


Monument Valley 


</p> 
<p> 
<img src="monument. jpg" Das Monument Valley ist eine 
width="100" Ebene auf dem Colorado Plateau 
alt="Bild vom Monument Valley" an der südlichen Grenze des US- 


align="right"/> Bundesstaates Utah zu Arizona. 


Das Monument Valley... 
</p> 


Design und Layout für HTML-Seiten 


css 


At 


Motivation 


= HTML beschreibt Inhalt und Struktur von Texten 
= Keine/Kaum Aussagen über Aussehen und Gestaltung 


= Redundante Definition in HTML 
> Beispiel Schriftart: muss in jedem HTML-Element definiert werden 


>» häufige Wiederholung auf vielen Seiten 


= Ziel: Auslagerung von Gestaltungsdefinitionen 
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Vorteile 


= Eine Gestaltungsdefinition für alle Seiten 


= Zeit- und Platzersparnis: 
> muss nur einmal geladen werden 


> HTML-Seiten werden kompakter 


= Gleicher Inhalt, viele Gestaltungen 


> http://csszengarden.com 
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CSS Zen Garden 


e0e css Zen Garden: The Beauty in CSS Design 


| 4> | 73 + E: http: / /www.csszengarden.com/?cssfile=/191/ 191.css&page=2 | 6 Ha Google 
css Zen Garden: The Beauty in CS... css Zen Garden: The Beauty in CS... css Zen Garden: The Beauty in CS... 


Download 


57 02-2 > AR A demonstration of what can be accompli: egpepserp 


(Ss /EN (4 ARDEN visually through CSS-based design. Select iur 


ir style sheet from the list to load it into this gie 
— (ärneerndTıe ——— 


the Beauty of CSS design 


Tke Bondk FR En mern Littering a dark and dreary road lay the past relics of browser- 
IE cm aa J20ÖS 2. specific tags, incompatible DOMs, and broken CSS support. 


Today, we must clear the mind of past practices. Web 


enlightenment has been achieved thanks to the tireless efforts of 
folk like the W3C, WaSP and the major browser creators. 

The css Zen Garden invites you to relax and meditate on the 
important lessons of the masters. Begin to see with clarity. 
Learn to use the (yet to be) time-honored techniques in new and 


invigorating fashion. Become one with the web, 


There is clearliy a need for CSS to be taken seriousiy by graphic > Maf is 7 is Alutl 
7 Pr . 


artists. The Zen Garden aims to excite, inspire, and encourage 200S 


De ee 
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Möglichkeiten 


« Schrifteigenschaften (Schriftart, fett, kursiv, etc.) 
= Farben (Vorder-, Hintergrund, Rahmenfarbe) 

= Position und Abstände von Elementen 

= Hintergrundbilder 


= Mouse-Over-Effekte (z.B. für Links) 


al 
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css 


= Cascading Style Sheets - kaskadierende Formatvorlagen 
> klingt einschüchternd 


>» ist aber ein einfaches Konzept 
= Andere Syntax als HTML, keine Elemente 


„= Wie nähern wir uns dem Begriff? 
>» Formatvorlage jetzt 


> kaskadierende später 
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CSS - Begriffe 


„ Stylesheets sind eine Sammlung von (Gestaltungs-)Regeln 


= Jede Regel besitzt die Form: 
Selektor { Eigenschaft: Wert;} 


= Eigenschaft definiert eine Gestaltungsmöglichkeit 


> z.B.: Hintergrundfarbe > "background-color" 


« Wert definiert eine Zuweisung für die Eigenschaft 


> z.B.: die Farbe Gelb > "yellow" 


= background-color: yellow; 
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Selektoren 


= Auswahl der Elemente, auf die die Eigenschaften angewendet werden 


= Im einfachsten Fall: Der Elementname 
> z.B.:h1 für das Element <h1>Überschrift</h1> 
»h1 { background-color: yellow; } 


= Eine Selektor kann mehrere Elemente auswählen 


= Viele weitere Selektor-Definitionen 
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Wie können CSS Regeln in HTML verwendet werden 


Einbindung von CSS 


Einbindung - Inline 


«= Im HTML-Dokument (Inline) 


= Element "style" im "head" der HTML-Seite 


> Sammlung der Regeln als Inhalt dieses Elements 


« Attribut "type" muss auf "text/css" gesetzt werden 
>» potenziell verschiedene Sprachen für die Gestaltung 


>» CSS ist aber die einzig verbreitete 


Sr 


Einbindung (Inline) 


<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
h1 { background-color: yellow; } 


ne Überschrift 
</head> 


<body> 


Absatz 


<h1>Überschrift</h1> 
<p>Absatz</p> 


</body> 
</html> 


Einbindung - Extern 


= Als externe CSS-Datei 


= Element "Link" im "head" der HTML-Seite 


>» um externe Dateien logisch mit der Seite zu verknüpfen 


= Attribut "rel" von "relationship" definiert Art der Beziehung 


>» muss auf "stylesheet" gesetzt werden 
« Attribut "type" muss auf "text/css" gesetzt werden 


= Attribut "href" enthält URL der CSS Datei 


os 


Einbindung (Extern) 


http: //www.hs-furtwangen.de/web/kurs/seite.html 


<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet'" 
type="text/css" 
href="formate.css'!"> 


</head> 
<body> 
<h1>Überschrift</h1> 
<p>Absatz</p> 
</body> 
</html> 


Absatz 


http: //www.hs-furtwangen.de/web/kurs/formate.css 


hl { 
background-color: yellow; 


} 


Einbindung - Element 


= Direkt an den Elementen 
> mit dem Universalattribut "style" 


> Teil eines Elements > deshalb ohne Selektor 
style="background-color: yellow;" 


«= Gefahr von Redundanzen 


> nur in Ausnahmen den CSS-Dateien vorzuziehen 
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Einbindung (Element) 


<!DOCTYPE html> 


<html> 
<body> 
<h1 style="background-color: yellowz;'"> Überschrift 
Überschrift 
</h1> Absatz 
<p>Absatz</p> 
</body> 
</html> 


HFU Dn Prof. Dr. Stefan Betermieux | Fakultät Informatik 
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Allgemeine Hinweise 


= Leerzeichen, Leerzeilen und Tabulatoren sind erlaubt 


>» Strukturierung der Regeln 


= Kommentare werden wie folgt definiert: 
/*x Kommentar ın CSS */ 


> dies unterscheidet sich von HTML: 
<!-- Kommentar in HTML --> 


>» einzeilige Kommentare funktionieren nicht: 
// kein Kommentar in CSS 
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Auswahl der zu gestaltenden Elemente 


Selektoren 
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Selektoren 


= Universal-Selektor: x 


> wählt alle Elemente einer Seite aus 


= Element-Typ-Selektor: ElementName 


> wählt alle Elemente eines Typs aus, z.B. hl 


= |D-Selektor: #IDName 


>» wählt das Element mit dem entspr. ID-Attribut aus 
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Selektoren 


<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
* { background-color: grey; } 
hl { background-color: yellow; } 
#unten { background-color: aqua; } 
</style> 
</head> 
<body> 
<h1>Überschrift</h1> 
<p>oberer Absatz</p> 
<p id="unten">unterer Absatz</p> 
</body> 
</html> 
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Selektoren 


= Klassen-Selektor: .Klassen-Name 
> wählt alle Elemente einer Klasse aus 
>» Klassen werden im Universal-Attribut class definiert 


> Im Gegensatz zur ID können mehrere Elemente die gleiche Klasse 
haben 


>» Ein Element kann zu mehreren Klassen gehören 


» durch Leerzeichen getrennt 
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Selektoren 


<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
‚wichtig { background-color: red; } 


.info { color : blue; } 


</head> 

<body> oberer Absatz 
<h1 class="wichtig">Überschrift</h1> 
<p class="info'">oberer Absatz</p> — — 
<p class="wichtig info"> 

unterer Absatz 

</p> 

</body> 

</html> 


Selektoren 


= |D oder Klasse? 


= ID darf nur einmal je Seite auftauchen 


>» Klassen beliebig oft 


= Ein Element kann nur eine ID besitzen 


>» aber beliebig viele Klassen 


= Entscheidend: Ist die Gestaltung des Elements einmalig? 


> z.B. Navigationsmenü, Titelbereich, Fußzeile 
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Selektoren 


= Pseudo-Klassen :Klassen-Name 


>» wählt Elemente, die sich in einem bestimmten Zustand befinden 


„ :hover > Eigenschaften eines Elements, über das sich die Maus 
befindet 


« : Link > Eigenschaften eines Hyperlinks 


. :visited > Eigenschaften eines besuchten Hyperlinks 
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Selektoren 


<!DOCTYPE html> 


<html> 
<head> 
<style type="text/css"> 
a:link { background-color: red; } 


a:visited { background-color: green; } 
p:hover { background-color: yellow; } 
</style> 
</head> 
<body> 
<a href="jenes.html">Hyperlink</a> 
<a href="weiteres.html">besuchter Hyperlink</a> 
<p>oberer Absatz</p> 
<p>unterer Absatz</p> 
</body> 
</html> 


oberer Absatz 2 


——— 


Kombinationen 


= Kombinationen sind möglich, z.B.: 
>» hı1.info > Alle h1 Elemente mit der Klasse "info" 


>» p.wichtig:hover > Mouse-Over-Effekt für alle p Elemente mit 
der Klasse "wichtig" 


«= Wenn nur eine Möglichkeit offen ist, sollte diese auch angegeben 
werden: 


>» schlecht: #header 


> besser: div#header 
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Mehrfachdeklaration 


« Selektoren dürfen beliebig oft aufgeführt werden: 


h1 { background-color: red;} 
h1ı { color: blue; + 


= Können aber auch zusammengefasst werden: 


nal 
background-color: red; 
color: blue; 


} 


Gruppierungen 


= Wenn mehrere Selektoren die gleichen Eigenschaften bekommen 
sollen > Gruppierung mittels Komma 
„ Statt: 


hl { color: red;} 
div { color: red;} 
inte 1 color: red:, 


= geht auch: 


nisch ver Inkos seco ler area! 


Ks 


Kaskaden 


= Was passiert bei Widersprüchen? 


= Regeln werden gewichtet (Auswahl): 


1. style-Attribute (style="..") 

2. ID-Selektoren (#unten {...}) 

3 

4. Element-Typ-Selektoren (h1 {...}) 


Klassen-Selektoren (.wichtig {...}) 
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Kaskaden 


= Eigenschaften können mittels Kaskaden geschickt gemischt werden 


= z.B.: Vorder- und Hintergrundfarbe für alle div-Elemente festlegen > 
Element-Typ-Selektor 


= Hintergrundfarbe für ein einzelnes Element mit höherwertigem 
Selektor überschreiben, z.B. ID-Selektor 


= Vordergrundfarbe bleibt unangetastet 
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Kaskaden 


<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
div { 
background-color: aqua; 
color : grey; 


} 
#wichtig { 
background-color: yellow; 
} 
</style> 
</head> 
<body> 
<div> 
oberer Absatz 
</div> 
<div id="wichtig"> 
unterer Absatz 
</div> 
</body> 
</html> 
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Eine Auswahl der wichtigsten Gestaltungseigenschaften 
(Selbststudium) 


Eigenschaften 


= Farben 

= [ext 

= Ausrichtung 
« Schrift 


= (Hintergrundbild) 


Übersicht 


= (Listen) 
= (Rahmen) 
= (Abstände) 


= (Positionierung) 


Su 


Farben 


= color (Textfarbe) 
Name der Farbe 
numerische Angabe der Farbe 


« background-color (Hintergrundfarbe) 
Name der Farbe 
numerische Angabe der Farbe 


Sl 
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Farbangaben 


= Hexadezimal in der Form #RRGGBB (additiv) 
ein Byte (0-ff hex, 0-255 dezimal) für Rot, Blau und Grün 


#000000 > schwarz #ffffff> weiß #777777 > grau 
#ff0000 >rot #00ff00 >grün #0000ff > blau 


= Kurzschreibweise #RGB 


#f00 > #ff0000 #123>#112233 #a03 > #aa0033 


= oder Farbnamen (nächste Folie) 
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Farbnamen (Auswahl) 


Name deutscher Name | Hexadezimalcode Farbe 
black schwarz #000000 
maroon bordeauxrot #800000 
green grün #008000 
navy dunkelblau #000080 
gray grau #808080 
red rot #TTO000 
yellow gelb #rrrrfoo 
blue blau #0000ff 
aqua türkis #00ffff 


white weiß #trffff 


Farben 


<!DOCTYPE html> 


<html> 
<head> 
<style type="text/css"> 
‚wichtig { 
color : #f56d3e; 
; 
.info { 
color : #00f; 
; 
</style> 
</head> 
<body> 
<p> 
Absatz mit 
<span class="wichtig">wichtigen</span> 
und 


<span class="info">informativen</span> 
Elementen! 
</p> 
</body> 
</html> 
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Absatz mit wichtigen und informativen 


Elementen! 


je 


\ 


mn 
” 


H: 415 
75 
Bi ige 
R: '245 | 
G: 109 | 
Bio 


$ 
& 
$5 
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Text 


= text-decoration (Textdekoration) 
underline (unterstrichen) 
overline (überstrichen) 
lLine-through (durchgestrichen) 


= text-transform (Text-Transformation) 
capitalize (Wortanfänge als Großbuchstaben) 
uppercase (Nur Großbuchstaben) 
lowercase (Nur Kleinbuchstaben) 


: letter-spacing (Zeichenabstand) 
numerischer Wert (Abstand zwischen den Buchstaben) 


os) 


Exkurs: Numerische Werte 


Millimeter 


€e55 
Einheit Bedeutung 


absolut 'Angabe in Bildschirmpixel 


Angabe in Millimetern 
Angabe in Zentimetern 


. Angabe relativ zu einer anderen Größe abhängig von 
relativ 
der verwendeten Eigenschaft, z.B. zum Elternelement 


ı | y1yewuoyu] JernyeS | xna1UU18J29 Ue4SIS IQ Old 
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<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
‚wichtig { 
text-transform : uppercase; 
letter-spacing : 200%; 


} 
.info 1 
text-decoration : underline; 


} 


Absatz mit 
</style> WwıceH T 1 6 


</head> und informativen Elementen! 
<body> 


<p> 
Absatz mit 
<span class="wichtig">wichtigen</span> 
und 
<span class="info">informativen</span> 
Elementen! 
</p> 
</body> 
</html> 
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Ausrichtung 


line-height (Zeilenhöhe) 
numerischer Wert (Abstand zwischen den Zeilen) 


vertical-align (Vertikale Ausrichtung) 
top (obenbündig ausrichten) 

middle (mittig ausrichten) 

bottom (untenbündig ausrichten) 


text-align (Horizontale Ausrichtung) 
left (linksbündig ausrichten) 

center (zentriert ausrichten) 

right (rechtsbündig ausrichten) 
justify (als Blocksatz ausrichten) 
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Ausrichtung 


<!DOCTYPE html> 


<html> 
<head> 
<style type="text/css"> 
.oben { vertical-align : top; } 
‚unten f{ vertical-align : bottom; } 
‚rechts { text-align rights |} 
</style> 
</head> 
<body> 
<p> 
<img src="monument.jpg" 


width="100" 
alt="Bild vom Monument Valley'/> 
<span class="oben">Monument</span> 
<span class="unten">Valley </span> 
</p> 
<hr/> 
<p class="rechts"> 
unterer Absatz 
</p> 
</body> 
</html> 
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Monument 


Valley 


unterer Absatz 
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Schrift 


«= font-family (Schriftart) 
Name der Schriftart (muss vorinstalliert sein, z.B. Times) 
serif (Schriftart mit Serifen) 
sans-serif (Schriftart ohne Serifen) 
monospace (Schriftart mit gleichbreiten Zeichen) 


= font-style (Schriftstil) 
italic (kursiver Schriftstil) 
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Schrift 


«= font-weight (Schriftgewicht) 
bold (fett) 


„= font-size (Schriftgröße) 
numerischer Wert 
small (klein) 
medium (mittel) 
large (groß) 


Sal 


Schrift 


<!DOCTYPE html> 


<html> 
<head> 
<style type="text/css"> 
‚wichtig { 
font-family : Times; 
font-style : italic; 
font-weight : bold; a 
font-size : 30px; 
} unterer Absatz 
</style> a 
</head> 
<body> 


<p>oberer Absatz</p> 
<p class="wichtig">unterer Absatz</p> 
</body> 
</html> 
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ZUSAMMENFASSUNG 


Se, 


Zusammenfassung 


= Struktur von HTML 
= Einführung in HTML 
> Text 
> Hypertext 
> Tabellen 
= Grundlagen CSS 
>» Möglichkeiten der Einbindung 
= Techniken CSS 
>» Selektoren, Vererbung und Verschachtelung 
>» Eigenschaften 
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